<template>
	<view class="content">
		<view class="logo-area">
			<img src="../../static/logo.png"></img>
		</view>
		<view class="title-area">
			<img src="../../static/title.png"></img>
		</view>
		<view class="menu-box">
			<view>
				<view class="m-col" style="margin-bottom: 60rpx;">
					<view class="m-row menu-item">
						<view>
							<input class="uni-input" type="number" placeholder="请输入手机号" confirm-type="search"
								@confirm="handleInput" />
						</view>
					</view>
				</view>
				<view class="m-col">
					<view class="m-row menu-item" @tap="openScan()">
						<view>
							签到扫码
						</view>
					</view>
				</view>
			</view>
		</view>
		<ErrorPage ref="errorPageRef"></ErrorPage>
		<FootLogo></FootLogo>
	</view>
</template>

<script>
	import ErrorPage from '@/components/errorPage/index.vue';
	import FootLogo from '@/components/footLogo/index.vue';
	import h5ScanCode from 'h5-scan-code'
	export default {
		components: {
			ErrorPage,
			FootLogo
		},
		data() {
			return {
				scanType: '1', // 1-4 
				loginType: '1' // 1签到扫码  2 分论坛扫码 3 公开课扫码
			}
		},
		onLoad(props) {
			// if (props.type) {
			// 	this.loginType = props.type || 1
			// 	this.scanType = props.meetType || 1
			// }
		},

		methods: {
			handleInput(e) {
				if (e.target.value.length == 11) {
					let api = `https://flow.btvs.cn/api/basic/guest/sigin/${e.target.value}`
					uni.request({
						url: api,
						method: 'PUT',
						dataType: 'json',
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: (res) => {
							uni.hideLoading();
							if (res.data.code == 200) {
								uni.showToast({
									title: '签到成功',
									icon: "success"
								})
								if (this.loginType == '1') {
									uni.navigateTo({
										url: '/pages/userInfo/userInfo?uId=' + res.data.data.id
									})
								}

							} else if (res.data.code == 5003) {
								// 错误码 5003 该二维码已签到
								// this.$refs.errorPageRef.show()
								uni.showToast({
									title: '已签到',
									icon: "none"
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "error"
								})

								if (res.data.code == 401) {
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/hwLogin/index'
										})
									}, 1500)
								}
							}
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast({
								title: '网络开小差了哦',
								icon: "error"
							})
						},
					});
				} else {
					uni.showToast({
						title: '请输入正确的手机号！',
						icon: "none"
					})
				}
			},
			openScan() {
				h5ScanCode({
					// 扫码类型 (目前仅支持 'qrCode')
					scanType: 'qrCode',
					// 摄像头方向 ( 'back' | 'front' )
					facingMode: 'back',
					// 是否允许从相册选择 (默认 true)
					allowOpenAlbum: true,
					// 是否允许开启闪光灯 (默认 true)
					allowOpenTorch: true,
					// 控件容器字体大小 (默认 '28rpx')
					fontSize: '28rpx',
					// 控件容器图层层级 (默认 999999)
					zIndex: 999999,
					// 扫码成功回调
					success: (e) => {
						const str = e.result;
						// 使用正则表达式匹配编号后面的内容
						const match = str.match(/编号：(\d+)/);
						let userId = ''
						if (match) {
							userId = match[1]; // 提取匹配的第一组内容
						} else {
							uni.showToast({
								title: '未匹配到数据，请联系工作人员！'
							})
							return
						}
						// 网络请求
						uni.showLoading({
							title: '请求中',
						});
						// 类型 1 签到扫码 2 分论坛扫码 3 公开课扫码
						let api = `https://flow.btvs.cn/api/basic/guest/status/1/${userId}`
						// if (this.loginType == '2') {
						// 	api = `https://flow.btvs.cn/api/basic/forumScan/scan/${userId}/${this.scanType}`
						// }
						// if (this.loginType == '3') {
						// 	api =
						// 		`https://flow.btvs.cn/api/basic/openClassScan/scan/${userId}/${this.scanType}`
						// }
						uni.request({
							url: api,
							method: 'PUT',
							dataType: 'json',
							header: {
								Authorization: uni.getStorageSync('token')
							},
							success: (res) => {
								uni.hideLoading();
								if (res.data.code == 200) {
									uni.showToast({
										title: '签到成功',
										icon: "success"
									})
									if (this.loginType == '1') {
										uni.navigateTo({
											url: '/pages/userInfo/userInfo?uId=' + userId
										})
									}

								} else if (res.data.code == 5003) {
									// 错误码 5003 该二维码已签到
									// this.$refs.errorPageRef.show()
									uni.showToast({
										title: '已签到',
										icon: "none"
									})
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: "error"
									})
									if (res.data.code == 401) {
										setTimeout(() => {
											uni.navigateTo({
												url: '/pages/hwLogin/index'
											})
										}, 1500)
									}
								}
							},
							fail: () => {
								uni.hideLoading();
								uni.showToast({
									title: '网络开小差了哦',
									icon: "error"
								})
							},
						});
					},
					// 扫码失败回调
					fail: (e) => {
						uni.showToast({
							title: e
						})
					},
					// 扫码完成回调
					complete: (e) => {},
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		background: url('../../static/login_bg.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.logo-area {
			width: 120px;
			position: absolute;
			top: 40px;
			right: 40px;
			z-index: 9;

			img {
				width: 100%;
				display: block;
			}
		}

		.title-area {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				margin-top: -660rpx;
				width: 90%;
				display: block;
			}
		}

		.menu-box {
			width: 60%;
			margin: 0 auto;
			position: absolute;
			top: 60%;
			left: 20%;

			.m-col {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.m-row {
					padding: 24rpx 34rpx;
					background-color: #fff;
					border-radius: 30rpx;
				}

				.menu-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					font-size: 32rpx;
					font-weight: 600;
					color: #230d61;

					.menu-icon {
						height: 66rpx;

					}
				}

			}
		}

		.bqxx {
			width: 100%;
			position: fixed;
			bottom: 60rpx;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
		}
	}
</style>